<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/page/login/signin.css">
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/bootstrap/js/bootstrap.min.js"></script>
</head>


<body>
   <p align="right" style="margin-right:140px">配送至<input type="text" id="address" /></p>
   <form action="/mobile-manage-web/shopping/addOrder.action" method="post" id="orderForm">
        <input type="hidden" name="address" />
	   <table class="table" style="width:80%" align="center">
		    <thead>
			    <tr class="active">
			       <th><input type="checkbox" />  </th>
			       <th>图片</th>
			       <th>名称</th>
			       <th>大小/版本</th>
			       <th>价格</th>
			       <th>数量</th>
			       <th>小计</th>
			       <th>操作</th>  
			    </tr>
			 </thead>		 
			 <tbody>
			    <c:forEach items="${coll}" var="item">
			      <tr class="danger">
			          <td><input type="checkbox" value="${item.app.id}" name="appid" />  </td>
				      <td><img src="${item.app.appicon}"> </td>
				      <td>${item.app.appname}</td>
				      <td>${item.app.filesize} <br/>
				          ${item.app.version} 
				      </td>
				      <td>${item.app.price}</td>
				      <td>${item.buyNum}</td>
				      <td>${item.totalPrice}</td>
				      <td><a>删除</a></td>
			      </tr>
			    </c:forEach>
			      <tr>
			        <td align="right" colspan="10">
			                               已选购<span style="color:red;font-size:20px">${count}</span>件商品 &nbsp; 
			                               总价(不含运费):￥<span style="color:red;font-size:20px">${totalPrice}</span>
			             <button id="checkOut" class="btn btn-danger" type="button">去结算</button>
			        </td>
			      </tr>
			 </tbody>
	   </table>
    </form>
      
  <div align="center" id="form" style="display: none;">
   <div class="panel panel-info" style="width:50%">
	   <div class="panel-heading">
	      <h3 class="panel-title">请先登陆</h3>
	   </div>
	   <div class="panel-body">
				<form class="form-signin" role="form" id="userForm">
					<input type="text" class="form-control" placeholder="用户名" required autofocus name="phone" />
					<input type="password" class="form-control" placeholder="密码" required name="password" />
					<button class="btn btn-lg btn-success btn-block" type="button" id="submit">登录</button>				
				</form>

	   </div>
	</div>
  </div>  
   
   <script type="text/javascript">
    $(function(){
    	 
    	  $(":checkbox").prop("checked", true);
    	  
    	  //结算时没有登陆的话让用户先登陆
    	  $("#checkOut").click(function(){
    		   var user = "${user}";
    		   if(user==null || user=="") { 
    			   $("#form").show();
    		   } else {
    			   toOrder();
    		   }
    	  });
    	  
    	  $("#submit").click(function(){
    		   $.ajax({
    			   url:"/mobile-manage-web/shopping/login.action",
    			   type:"post",
    			   data:$("#userForm").serialize(),
    			   success:function(obj){
    				   if(obj){
    					   toOrder();
    				   } else {
    					   alert("登陆失败");
    				   }
    			   },
    			   dataType:"json"
    		   }); 
    	  });
    	  
    	  
    	  //提交选购的商品
    	  function toOrder() {	  
    		  $("[name='address']").val($("#address").val());
    		  $("#orderForm").submit();
    	  }
      });
   </script>
   
</body>
</html>